<template>
	<el-container>
		<el-main class="nopadding">
			<jd-form-design :appInfo="appInfo" :model="dataModel" :modelTree="treeData" :forms="forms" ref="designer"/>
		</el-main>
	</el-container>
</template>

<script>
	import jdFormDesign from '@/components/jdFormDesign';

	export default {
		name: 'appStore',
		components:{
			jdFormDesign
		},
		data() {
			return {
				loading: false,
				config: {},
				appId: 0,
				formId: 0,
				appInfo: [],
				dataModel: [],
				treeData:[],
				forms: {},
            }
		},
		mounted() {
			this.appId = this.$route.query.appId;
			this.formId = this.$route.query.formId;
			// 获取应用信息
			this.getAppInfo();
		},
		methods: {
			// 获取应用信息
			async getAppInfo(){
				var res = await await this.$API.app.appStore.getInfo.get(this.appId);
				if (res.code == 200) {
					this.appInfo = res.data;
					this.appInfo.formId = this.formId;
					this.getDataModel();
					this.getModelTree();
					this.getProcessForms();
				}

				// 以下代码请务必保留，仅供表单调试使用
				// var json = `[{"type":"input","field":"DHWB","title":"单行文本","info":"","$required":false,"validate":false,"props":{"clearable":true},"_fc_drag_tag":"jd-input","hidden":false,"display":true},{"type":"select","field":"XL","title":"学历","info":"","effect":{"fetch":""},"$required":false,"validate":false,"style":{"width":"100%"},"props":{"filterable":true,"clearable":true},"options":[{"label":"选项1","value":1},{"label":"选项2","value":2}],"_fc_drag_tag":"jd-select","hidden":false,"display":true}]`;
				// this.$nextTick(()=>{
				// 	console.log('this.$refs.designer',this.$refs.designer)
				// 	this.$refs.designer.setRule(formCreate.parseJson(json));
				// })
			},
			// 获取表单信息
			async getProcessForms(){
				var params = {
                    appId: this.appId,
                    pageSize: 50
                }
				var res = await this.$API.app.form.list.get(params);
				if (res.code == 200) {
					this.forms = res.data.rows;
				}
			},
			// 获取数据模型
			async getDataModel(){
				var params = {
                    appId: this.appId,
                    pageSize: 50
                }
				var res = await this.$API.app.model.list.get(params);
				if (res.code == 200){
					this.dataModel = res.data.rows;
				}
			},
			// 获取模型树状结构
			async getModelTree(){
				var params = {
					appId: this.appId,
					pageSize: 50
				}
				var res = await this.$API.app.model.tree.get(params);
				if (res.code == 200){
					this.treeData  = this.formatData(res.data);
				}
			},
			formatData(params,table){
				let data = params;
				data.map((item) => {
					item.label = item.tableComment || item.comment;
					if (table!=''){
						item.table = table;
					}
					item.treeId = item.tableName || item.table+'@'+item.field;
					if(item.hasOwnProperty('children')){
						item.disabled = true;
						this.formatData(item.children, item.tableName);
					}
				});
				return data;
			},
		},
	}
</script>
<style lang="scss">

</style>